<template>
  <div class="aaa">
    <div class="top">
      <van-search
        label="有品"
        v-model="value"
        shape="round"
        background="#8B6914"
        placeholder="搜一搜"
       @click="funn1()"/>
    </div>
    <div class="carousel">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
           v-for="(v,i) in $store.state.carouselstore.arr" :key="i" @click="fun1()"><img
            :src="v.img"
            alt=""
        /></van-swipe-item>
        
      </van-swipe>
    </div>
    <div class="navigation">
      <Everyday/>
    </div>
    <div class="advertising">
      <img
        src="https://img.youpin.mi-img.com/jianyu/fd68a4cbbe3240b18edc723a3f58f358.gif?w=1080&h=120"
        alt=""
      />
    </div>
    <div class="activity">
      <img src="thirt.gif" alt="" />
    </div>
    <div class="discount">
      <ul>
        <li v-for="(v, i) in this.$store.state.discountstore.arr" :key="i">
          <img :src="v.img"/>
        </li>
      </ul>
    </div>
    <div>
      <Newchoose class="newchoose"/>
    </div>
    <div class="crowd" v-if="this.$store.state.crowdstore">
      <ul class="one">
        <li>
          <p style="font-size: 18px; font-weigth: bold">小米有品众筹</p>
          <p />
        </li>
        <li>
          <p @click="funmore()">更多></p>
          <p />
        </li>
      </ul>
      <Crowd
        v-for="(v, i) in this.$store.state.crowdstore.arr"
        :key="i"
        :name="v.name"
        :title="v.title"
        :price="v.price"
        :img="v.img"
      />
      <div class="center">
        <Chair
          v-for="(v, i) in this.$store.state.chairstore.arr"
          :key="i"
          :name="v.name"
          :price="v.price"
          :img="v.img"
          :num="v.num"
        />
      </div>
      
    </div>
    <div class="hot">
       <h3>热销榜</h3>
         <p style="font-size:10px;color:rgb(153, 153, 153);position: absolute;bottom:10px;left:60px" >排序由销量、搜索、好评等综合...</p>
         <p style="font-size:16px;position: absolute;right:0;bottom:15px">更多></p>
    </div>
    <div class="smallhot">
    <Smallhot/>
    </div>
      <Newchoose/>
      <van-tabs v-model="active" class="mmm">
        <van-tab title="推荐">
          <List/>
        </van-tab>
        <van-tab title="1212">
          <Listone/>
        </van-tab>
        <van-tab title="智能">
          <Listtwo/>
        </van-tab>
        <van-tab title="电器">
         <Listthree/>
        </van-tab>
         <van-tab title="生活">
         <Listfour/>
        </van-tab>
         <van-tab title="时尚">
         <Listfive/>
        </van-tab>
      </van-tabs>
  </div>
</template>
<script>
import Everyday from "@/components/home/everyday.vue";
import Newchoose from "@/components/home/newchoose.vue";
import Crowd from "@/components/home/crowd.vue";
import Chair from "@/components/home/chair.vue";
import Smallhot from "@/components/home/smallhot.vue";
import List from "@/components/home/list.vue";
import Listone from "@/components/home/listone.vue";
import Listtwo from "@/components/home/listtwo.vue";
import Listthree from "@/components/home/listthree.vue";
import Listfour from "@/components/home/listfour.vue";
import Listfive from "@/components/home/listfive.vue";
export default {
  methods: {
    // onClick(name, title) {
    fun1(){
      this.$router.push("/saodi")
    },
    // },
    fun(){
      this.$store.dispatch("sends");
    },
    funmore(){
      this.$router.push("./crowdfund")
    },
    funn1(){
      this.$router.push("/sousuo")
    }
  },
  data() {
    return {
      active: 2,
      value: "",
      // arr:[1,2,3,4,5,6]
    };
  },
  mounted() {
    this.fun()
    // console.log(this.$store.state.liststore.arr.shoplist)
  },

  components: {
    Everyday,
    Newchoose,
    Crowd,
    Chair,
    Smallhot,
    List,
    Listone,
    Listtwo,
    Listthree,
    Listfour,
    Listfive,
    // Bottom
  },
  
};
</script>

<style scoped>

.center {
  display: flex;
  justify-content: space-evenly;
}
.footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.tab ul{
  display: flex;
  width: 100%;
  overflow-x: auto;
  flex: 1;
}
.aaa{
  width: 100%;
}
.tab ul li{
  border-right: 1px solid black;
    display: flex;
    flex:0 0 25%;
    place-content: flex-start center;
}
.my-swipe .van-swipe-item {
  /* color: #fff; */
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}
img {
  display: flex;
  width: 375px;
  height: 160px;
  opacity: 1;
  border-radius: 0px;
}
.advertising img {
  width: 375px;
  height: 41.6667px;
  box-sizing: border-box;
}
.discount img {
  width: 85.5px;
  height: 105px;
  
}
.discount ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.crowd {
  /* width: 95%; */
  padding: 8px;
}
.crowd .one {
  display: flex;
  justify-content: space-between;
}

.chire {
  display: flex;
}
.recharge {
  display: flex;
  justify-content: space-around;
}
.hot{
  display: flex;
  justify-content: space-between;
  position: relative;
}
.smallhot{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        overflow-x:auto ;
        /* margin-left:20px; */
}
</style>